<template>
    <div class="login-container">
        <div class="login-card">
            <h2 class="login-title">后台管理系统登录</h2>
            <form @submit.prevent="handleLogin">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" v-model="form.username" placeholder="请输入用户名" class="form-control" />
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <div class="password-input">
                        <input :type="passwordVisible ? 'text' : 'password'" v-model="form.password" placeholder="请输入密码"
                            class="form-control" />
                        <!-- <span class="password-toggle" @click="togglePasswordVisibility">
                            {{ passwordVisible ? '隐藏' : '显示' }}
                        </span> -->
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="login-btn" :disabled="loading">
                        {{ loading ? '登录中...' : '立即登录' }}
                    </button>
                </div>
                <div class="form-footer">
                    <a href="#">忘记密码？</a>
                    <a href="/register" class="register-link">立即注册</a>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { http } from '../../api/request'
import { ElMessage } from 'element-plus'
const router = useRouter()

const form = reactive({
    username: 'admin',
    password: '123456'
})

const passwordVisible = ref(false)
const loading = ref(false)

// 显示隐藏密码
// const togglePasswordVisibility = () => {
//     passwordVisible.value = !passwordVisible.value
// }

// 登录
const handleLogin = async () => {
    loading.value = true
    try {
        const res = await http.post<{
            code: number
            message: string
            user: {
                id: number
                username: string
            }
        }>('/login', form)

        if (res.code === 200) {
            // 登录成功，存储用户信息
            localStorage.setItem('user', JSON.stringify(res.user));
            localStorage.setItem('password', form.password)
            localStorage.setItem('isLogin', 'true')
            router.push('/')
        } else {
            // alert(res.message)
            ElMessage.error(res.message)
        }
    } catch (error) {
        console.log('登录失败，请检查网络')
    } finally {
        loading.value = false
    }
}
</script>


<style scoped lang="scss">
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-size: cover; //  将背景图铺满页面
    background-position: center; // 让背景图居中
    background-image: url("https://file.moyublog.com/d/file/2024-09-16/0bf3623df8251635a0b9819b9512c611.jpg");
}

.login-card {
    background: rgba(255, 255, 255, 0.288);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.login-title {
    text-align: center;
    margin-bottom: 20px;
    color: #2d8cf0;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

input:focus {
    outline: none;
    border-color: #2d8cf0;
    box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}

.password-input {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    cursor: pointer;
    font-size: 12px;
}

.login-btn {
    width: 100%;
    padding: 12px;
    background-color: #2d8cf0;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-btn:hover {
    background-color: #1e6ec2;
}

.login-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.form-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.form-footer a {
    color: #2d8cf0;
    text-decoration: none;
    margin: 0 10px;
}

.form-footer a:hover {
    text-decoration: underline;
}

.register-link {
    color: #666;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .login-card {
        padding: 20px;
        max-width: 90%;
    }
}
</style>